<template>
  <div class="split-box">
    <v-dialog title="物业合并" :show.sync="dialogVisible" :closeOnClickModal="false" @beforeClose="beforeClose" width="1200px">
      <div style="padding: 5px">
        <el-steps :active="active" align-center>
          <el-step title="物业信息确认"></el-step>
          <el-step title="执行房间合并"></el-step>
        </el-steps>
        <div class="resource-manage">
          <div class="card-box">
            <el-form v-show="active===0" class="form-wrap2 full" size="small">
              <el-table :data="sourceRoom" align="center">
                <el-table-column label="序号" width="60" type="index"></el-table-column>
                <el-table-column label="物业名称" prop="propertyName"></el-table-column>
                <el-table-column label="建筑面积（产权）(m²)" width="200" prop="buildingArea"></el-table-column>
                <el-table-column label="备注" prop="remarks"></el-table-column>
              </el-table>
            </el-form>

            <el-form v-show="active===1" ref="mergeRoom" :model="mergeRoom" class="form-wrap" size="small" :rules="mergeRoom_rules" label-position="top">
              <el-form-item label="物业名称" prop="roomName" :rules="mergeRoom_rules.propertyName">
                {{baseRoomName}}-
                <el-input
                  style="width: 200px;white-space:nowrap;"
                  onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                  v-model="mergeRoom.roomName"
                  maxlength="5"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="单元" prop="roomUnit">
                <el-input :readonly="true" v-model="mergeRoom.roomUnit" placeholder="请输入单元"></el-input>
              </el-form-item>
              <el-form-item label="楼层" prop="floor">
                <el-input :readonly="true" v-model="mergeRoom.floor" placeholder="请输入楼层"></el-input>
              </el-form-item>
              <el-form-item label="建筑面积(m²)" prop="buildArea">
                <el-input :readonly="true" v-model="mergeRoom.buildArea" placeholder="请输入建筑面积"></el-input>
              </el-form-item>
							<el-form-item label="物业类型" prop="projectType">
								<el-select v-model="mergeRoom.projectType" @change="changeProjectType" placeholder="请选择物业类型">
									<el-option
										v-for="item in propertyTypes"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="物业用途" prop="projectSubclassType">
								<el-select v-model="mergeRoom.projectSubclassType" placeholder="请选择物业用途">
									<el-option
										v-for="item in useTypesFilter"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
              <el-form-item label="备注" prop="remarks" class="full">
                <el-input v-model="mergeRoom.remarks" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <el-button class="btn-pro" style="margin-top: 12px;" v-show="active===1" @click="commit">完成</el-button>
        <el-button class="btn-pro" style="margin-top: 12px;" @click="cancel">取消</el-button>
        <el-button class="btn-pro" style="margin-top: 12px;" v-show="active===0" @click="next">下一步</el-button>
        <el-button class="btn-pro" style="margin-top: 12px;" v-show="active===1" @click="back">上一步</el-button>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import { validateRoomCode } from '~/views/property-info-sys/property-manage/api/room'
import { validateFacRoomName } from "~/views/property-info-sys/project-manage/api/project_manage";
export default {
  name: "merge-room",
  data () {
    let validateRoomCode = (rule, value, callback) => {
      if (!value) {
        callback()
      }
      this.validateOnly(value, callback)
    };
		let validatePropertyName = (rule, value, callback) => {
			if (!value) {
				callback()
			}
			this.validateNameOnly(value, callback)
		};
    return {
      dialogVisible: false,
      active: 0,
      sourceRoom: [],
      baseRoomName: '',
			propertyTypes: [],
			useTypes: [],
			useTypesFilter: [],
      mergeRoom: {
        roomName: '',
        roomCode: '',
        roomUnit: '',
        floor: '',
        buildArea: '',
        unitConstructionArea: '',
        remarks: '',
        oldRoomIds: []
      },
      mergeRoom_rules: {
        roomName: [
          { required: true, message: '物业名称', trigger: 'blur' },
          { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" },
					{ validator: validatePropertyName, trigger: "blur" }
        ],
        roomCode: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" },
          { validator: validateRoomCode, trigger: "blur" },
        ],
				projectType: [
					{required: true, message: '请选择物业类型', trigger: 'blur'}
				],
				projectSubclassType: [
					{required: true, message: '请选择物业用途', trigger: 'blur'}
				],
        remarks: [
          { min: 0, max: 100, message: "长度在0-100个字符串", trigger: "blur" },
        ]
      }
    }
  },
	mounted() {
		this.propertyTypes = this.getDict('property_types') //物业类型
		this.useTypes = this.getDict('property_use_types') //物业用途
	},
  watch: {
    sourceRoom (newVal, oldVal) {
      if (newVal != null) {
        this.mergeRoom.oldRoomIds = newVal.map(rep => {
          return rep.roomId
        })
        this.mergeRoom.roomUnit = newVal[0].roomUnit
        this.mergeRoom.floor = newVal[0].floor
        this.mergeRoom.buildArea = newVal.reduce((ac, curr) => parseFloat(ac) + parseFloat(curr.buildingArea), 0)
        this.mergeRoom.unitConstructionArea = newVal.reduce((ac, curr) => parseFloat(ac) + parseFloat(curr.unitConstructionArea), 0)

      }
    }
  },
  methods: {
		changeProjectType(val){
			this.$set(this.mergeRoom, 'projectSubclassType', '')
			//重置物业用途
			this.useTypesFilter = []
			if(val){
				//过滤物业用途
				this.useTypesFilter = this.useTypes.filter(ut => ut.value.indexOf(val) == 0)
			}
		},
		commit () {
      this.$refs['mergeRoom'].validate((valid) => {
        if (valid) {
					/*validateFacRoomName({ "roomName": this.baseRoomName + "-" + this.mergeRoom.roomName, "facId": this.sourceRoom.projectId || '' }).then(res => {
						if (res.data.data !== 0) {
							this.$message.error("物业名称已存在，请重新输入！")
							this.mergeRoom.roomName = ''
						} else {
							this.$emit("doMerge", this.mergeRoom)
							this.cancel();
						}
					})*/
					this.$emit("doMerge", this.mergeRoom)
					this.cancel();
        }
      })
    },
    validateOnly (value, callback) {
      validateRoomCode({ "roomCode": value }).then(rep => {
        let vr = rep.data.data
        if (vr === 0) {
          return callback();
        } else {
          return callback(new Error("编号已存在， 请重新输入"));
        }
      })
    },
    beforeClose (done) {
      this.cancel()
      done()
    },
    next () {
      if (this.active++ > 1) this.active = 0;
    },
    back () {
      if (this.active-- < 0) this.active = 0;
    },
    cancel () {
      this.dialogVisible = false
			this.$emit("mergeRoomClose")
    },
    //验证物业名称唯一
		validateNameOnly (value, callback) {
			validateFacRoomName({ "roomName": this.baseRoomName + "-" + value, "facId": this.sourceRoom.projectId || ''}).then(rep => {
				let vr = rep.data.data
				if (vr === 0) {
					return callback();
				} else {
					return callback(new Error("物业名称已存在，请重新输入！"));
				}
			})
		}
  }
}
</script>

<style lang='scss' scoped>
@include formWrap(2);
.split-box {
  overflow: hidden;
  .btn-pro {
    float: right;
    margin: 10px;
  }
}
</style>
